<!--<apes-header>-->
<!--<apes-button-list class="buttonList" [buttonBarMetadata]="buttonList" (click)="onClick()"></apes-button-list>-->
  <!--<apes-status-bar class="statusBar" [btnStatusMetadata]="statusList"></apes-status-bar>-->
<!--</apes-header>-->

<apes-content>

  <!-- 表单样式 -->
  <apes-card apesTitle="表单样式">

    <div apes-row [apesGutter]="16">

      <!-- Built-in样式 -->
      <fieldset>
        <legend>Built-in</legend>

        <!-- 长字段 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="6" title="这个是一个长长长的字段" apesTitle="prompt text" apesPlacement="topCenter" apes-tooltip>这个是一个长长长的字段</apes-form-label>
            <apes-form-control apes-col [apesMd]="18">
              <input apes-input placeHolder="'请输入字段'">
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 红字段 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <!-- 加上apesRequired 之后可以增加一个 红色的 * -->
            <apes-form-label apes-col apesRequired [apesMd]="6">字段二</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <input apes-input placeHolder="'请输入字段'">
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 字段三 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">字段三</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18" [apesValidateStatus]="'success'" apesHasFeedback>
              <input apes-input placeHolder="'请输入字段'">
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 跨两列布局 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">字段四</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <input apes-input disabled placeHolder="'请输入字段'">
            </apes-form-control>
          </apes-form-item>
        </div>

        <div apes-col [apesMd]="16">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="3">备注</apes-form-label>
            <apes-form-control  apes-col [apesMd]="21">
              <input apes-input placeHolder="'请输入字段'">
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 跨两列布局 -->
        <div apes-col [apesMd]="16">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="3">摘要</apes-form-label>
            <apes-form-control  apes-col [apesMd]="21">
              <input apes-input placeHolder="'请输入字段'">
            </apes-form-control>
          </apes-form-item>
        </div>

        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">字段五</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <input apes-input placeHolder="'请输入字段'">
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 跨三列布局 -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="2">意见输入</apes-form-label>
            <apes-form-control  apes-col [apesMd]="22">
              <input apes-input disabled placeHolder="'请输入字段'">
              <apes-form-explain>如果有任何的不满意地方，请及时反馈，我们期待你的任何建议</apes-form-explain>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- textarea -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="2">文本域</apes-form-label>
            <apes-form-control  apes-col [apesMd]="22">
              <textarea rows="4" apes-input placeHolder="'如果有任何的不满意地方，请及时反馈，我们期待你的任何建议'"></textarea>
            </apes-form-control>
          </apes-form-item>
        </div>

      </fieldset>

      <!-- Built-out样式 -->
      <fieldset>
        <legend>Built-out</legend>

        <!-- 样式字段一 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">样式字段一</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18" [apesValidateStatus]="'validating'" apesHasFeedback>
              <input apes-input placeHolder="'请输入字段'">
              <apes-form-explain>验证字段</apes-form-explain>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 样式字段二 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">样式字段二</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18" [apesValidateStatus]="'warning'" [apesHasFeedback]="true">
              <input apes-input placeHolder="'请输入字段'">
              <apes-form-explain >警告提示</apes-form-explain>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 样式字段三 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="6">样式字段三</apes-form-label>
            <apes-form-control apes-col [apesMd]="18" [apesValidateStatus]="'error'" apesHasFeedback>
              <input apes-input placeHolder="'请输入字段'">
              <apes-form-explain >错误提示</apes-form-explain>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!------------------------------ 控件布局 ------------------------------>

        <!-- select 控件 -->
        <!--<div apes-col [apesMd]="8">-->
          <!--<apes-form-item>-->
            <!--<apes-form-label  apes-col [apesMd]="6">下拉选择</apes-form-label>-->
            <!--<apes-form-control  apes-col [apesMd]="18">-->
              <!--<apes-select [(ngModel)]="selectValue" name="selectValue" apesAllowClear>-->
                <!--<apes-option *ngFor="let option of options" [apesLabel]="option.label" [apesValue]="option" [apesDisabled]="option.disabled">-->
                <!--</apes-option>-->
              <!--</apes-select>-->
            <!--</apes-form-control>-->
          <!--</apes-form-item>-->
        <!--</div>-->

        <!--数字控件-->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">InputNumber</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <apes-input-number [apesMax]="10" [apesMin]="1"></apes-input-number>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!--下拉多选-->
        <!--<div apes-col [apesMd]="8">-->
          <!--<apes-form-item>-->
            <!--<apes-form-label  apes-col [apesMd]="6">下拉多选</apes-form-label>-->
            <!--<apes-form-control  apes-col [apesMd]="18">-->
              <!--<apes-select [apesMode]="'multiple'" apesAllowClear>-->
                <!--<apes-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option">-->
                <!--</apes-option>-->
              <!--</apes-select>-->
            <!--</apes-form-control>-->
          <!--</apes-form-item>-->
        <!--</div>-->

        <!-- checkbox 与 radio -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="2">多选和单选</apes-form-label>
            <apes-form-control  apes-col [apesMd]="22">
              <label apes-checkbox>
                <span>Checkbox</span>
              </label>
              <apes-radio-group>
                <label apes-radio [apesValue]="'A'">
                  <span>Radio A</span>
                </label>
                <label apes-radio [apesValue]="'B'">
                  <span>Radio B</span>
                </label>
                <label apes-radio [apesValue]="'C'">
                  <span>Radio B</span>
                </label>
              </apes-radio-group>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!--日期和时间控件-->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">日期选择</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <apes-date-picker [apesStyle]="{width: '100%'}"></apes-date-picker>
            </apes-form-control>
          </apes-form-item></div>
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">年月</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <apes-month-picker [apesStyle]="{width: '100%'}"></apes-month-picker>
            </apes-form-control>
          </apes-form-item></div>

        <!-- 时间选择 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">时间选择</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <apes-time-picker [ngStyle]="{width: '100%'}"></apes-time-picker>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 日期选择 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">日期选择</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <apes-date-picker [apesStyle]="{width: '100%'}" [apesMode]="'month'" [apesFormat]="'YYYY-MM'" apesDisabled></apes-date-picker>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 区间段时间选择 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">区间段时间选择</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <apes-date-picker [apesStyle]="{width: '100%'}"
                              (ngModelChange)="_startDate=$event;_startValueChange()"
                              [ngModel]="_startDate" [apesDisabledDate]="_disabledStartDate"
                              apesShowTime
                              [apesFormat]="'yyyy-MM-dd HH:mm:ss'"
                              apesPlaceHolder="'Start date'"></apes-date-picker>
              <apes-date-picker [ngStyle]="{width: '100%'}"
                              (ngModelChange)="_endDate=$event;_endValueChange()"
                              [ngModel]="_endDate"
                              [apesDisabledDate]="_disabledEndDate"
                              [apesShowTime]="_endTime"
                              [apesFormat]="'yyyy-MM-dd HH:mm:ss'"
                              apesPlaceHolder="'End date'"></apes-date-picker>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 区间段时间选择 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="6">区间段时间选择</apes-form-label>
            <apes-form-control  apes-col [apesMd]="18">
              <apes-range-picker [(ngModel)]="_dateRange" [apesDisabledDate]="disabledDate"></apes-range-picker>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- cascader -->
        <!--<div apes-col [apesMd]="8">-->
          <!--<apes-form-item>-->
            <!--<apes-form-label  apes-col [apesMd]="6">cascader</apes-form-label>-->
            <!--<div apes-form-control apes-col [apesMd]="18">-->
              <!--<apes-cascader [nzExpandTrigger]="'hover'"-->
                           <!--[nzOptions]="cities"></apes-cascader>-->
            <!--</div>-->
          <!--</apes-form-item>-->
        <!--</div>-->

      </fieldset>

      <!-- steps样式 -->
      <fieldset>
        <legend>Steps</legend>

        <!-- 数字版 -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="2">数字样式</apes-form-label>
            <apes-form-control  apes-col [apesMd]="22">
              <div style="height: 150px; padding: 20px;" *ngFor="let step of steps01">
                <apes-steps [apesCurrent]="step.current"
                            [apesStatus]="step.status">
                  <apes-step *ngFor="let item of step.items"
                             [apesStatus]="item.status"
                             [apesTitle]="item.title"
                             [apesDescription]="item.Description"></apes-step>
                </apes-steps>
              </div>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 图标版 -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="2">图标样式</apes-form-label>
            <apes-form-control  apes-col [apesMd]="22">
              <div style="height: 150px; padding: 20px;" *ngFor="let step of steps02">
                <apes-steps [apesCurrent]="step.current"
                            [apesStatus]="step.status">
                  <apes-step *ngFor="let item of step.items"
                             [apesStatus]="item.status"
                             [apesTitle]="item.title"
                             [apesDescription]="item.Description"
                             [apesIcon]="item.icon"></apes-step>
                </apes-steps>
              </div>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 文字版 -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="2">文字样式</apes-form-label>
            <apes-form-control  apes-col [apesMd]="22">
              <div style="height: 150px; padding: 20px;" *ngFor="let step of steps03">
                <apes-steps>
                  <apes-step *ngFor="let item of step.items"
                             [apesStatus]="item.status"
                             [apesTitle]="item.title"
                             [apesDescription]="item.Description"
                             [apesType]="item.type"></apes-step>
                </apes-steps>
              </div>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 文字加图标 -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label  apes-col [apesMd]="2">文字加图标</apes-form-label>
            <apes-form-control  apes-col [apesMd]="22">
              <div style="height: 150px; padding: 20px;" *ngFor="let step of steps04">
                <apes-steps class="customer-service">
                  <apes-step *ngFor="let item of step.items"
                             [apesStatus]="item.status"
                             [apesTitle]="item.title"
                             [apesDescription]="item.Description"
                             [apesType]="item.type"
                             [apesIcon]="item.icon"></apes-step>
                </apes-steps>
              </div>
            </apes-form-control>
          </apes-form-item>
        </div>

      </fieldset>

      <!-- ng-select样式 -->
      <fieldset>
        <legend>ng-select</legend>

        <!-- 基本 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="6">基本</apes-form-label>
            <apes-form-control apes-col [apesMd]="18">
              <ng-select style="width: 100%;"
                         placeholder="Choose"
                         [searchable]="false"
                         [(ngModel)]="selectedValue2">
                <ng-option [value]="'jack'" >Jack</ng-option>
                <ng-option [value]="'lucy'" >Lucy</ng-option>
                <ng-option  disabled>Disabled</ng-option>
              </ng-select>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 多选+可添加+限制3个 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="8">多选+可添加+限制3个</apes-form-label>
            <apes-form-control apes-col [apesMd]="16">
              <ng-select [items]="listOfOption"
                         [addTag]="addTag"
                         addTagText="添加标签"
                         multiple="true"
                         [maxSelectedItems]="3"
                         [closeOnSelect]="false"
                         bindLabel="name"
                         placeholder="Tag Mode"
                         [(ngModel)]="listOfTagOptions">
              </ng-select>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 带搜索 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="6">带搜索</apes-form-label>
            <apes-form-control apes-col [apesMd]="18">
              <ng-select [items]="people"
                         bindLabel="name"
                         placeholder="Select a person"
                         [searchable]="true">
              </ng-select>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 不可选 -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="6" style="white-space: nowrap;"
                           title="不可选（动态from暂时无法渲染不可选状态）">不可选（动态from暂时无法渲染不可选状态</apes-form-label>
            <apes-form-control apes-col [apesMd]="18">
              <ng-select>
                <ng-option [value]="'lucy'">Lucy</ng-option>
              </ng-select>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 下拉表单 -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="2">下拉表单</apes-form-label>
            <apes-form-control apes-col [apesMd]="22">
              <ng-select [items]="people1"
                         class="ng-table"
                         bindLabel="name"
                         bindValue="name">

                <!-- 表头部分 -->
                <ng-template ng-header-tmp>

                  <div apes-row class="ng-table-row">
                    <div apes-col class="ng-table-col" [apesSpan]="4">id</div>
                    <div apes-col class="ng-table-col" [apesSpan]="4">name</div>
                    <div apes-col class="ng-table-col" [apesSpan]="4">age</div>
                    <div apes-col class="ng-table-col" [apesSpan]="4">city</div>
                    <div apes-col class="ng-table-col" [apesSpan]="8">title</div>
                  </div>

                </ng-template>

                <!-- 表主体部分 -->
                <ng-template ng-option-tmp let-item="item">

                  <div apes-row class="ng-table-row">
                    <div apes-col class="ng-table-col" [apesSpan]="4">{{item.id}}</div>
                    <div apes-col class="ng-table-col" [apesSpan]="4">{{item.name}}</div>
                    <div apes-col class="ng-table-col" [apesSpan]="4">{{item.age}}</div>
                    <div apes-col class="ng-table-col" [apesSpan]="4">{{item.city}}</div>
                    <div apes-col class="ng-table-col" [apesSpan]="8" [title]="item.title">{{item.title}}</div>
                  </div>

                </ng-template>

                <!-- 表尾部分 -->
                <ng-template ng-footer-tmp>

                  <button apes-button apesType="primary">提交</button>
                  <button apes-button apesType="primary">重置</button>

                </ng-template>

              </ng-select>
            </apes-form-control>
          </apes-form-item>

        </div>

        <!-- 分组 -->
        <div apes-col [apesMd]="24">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="2">分组</apes-form-label>
            <apes-form-control apes-col [apesMd]="22">
              <ng-select [items]="accounts"
                         bindLabel="name"
                         bindValue="name"
                         groupBy="country"
                         placeholder="Choose">
              </ng-select>
            </apes-form-control>
          </apes-form-item >
        </div>

      </fieldset>

      <!-- subtotal样式 -->
      <fieldset>
        <legend>subtotal</legend>

        <div apes-col [apesMd]="24">

          <!--<apes-subtotal>-->
            <!--<subtotal-left class="subtotalLeft"></subtotal-left>-->
          <!--</apes-subtotal>-->

        </div>

      </fieldset>

      <!-- tree样式 -->
      <fieldset>
        <legend>tree</legend>

        <!-- 基本 -->
        <div apes-col [apesMd]="12">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>基本.1</div>
            <tree-display [value]="TreeDemo01"></tree-display>
          </div>
        </div>

        <!-- 延迟 -->
        <div apes-col [apesMd]="12">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>延迟.2</div>
            <tree-display [value]="TreeDemo02" [loading]="Treeloading"></tree-display>
          </div>
        </div>

        <!-- 单选 -->
        <div apes-col [apesMd]="12">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>单选.3</div>
            <tree-display [value]="TreeDemo03"
                       selectionMode="single"
                       [(selection)]="selectedFile"
                       (onNodeSelect)="TreenodeSelect($event)" (onNodeUnselect)="TreenodeUnselect($event)"></tree-display>
            <div style="margin-top:8px">Selected Node: {{selectedFile ? selectedFile.data : 'none'}}</div>
          </div>
        </div>

        <!-- 多选 -->
        <div apes-col [apesMd]="12">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>多选4</div>
            <tree-display [value]="TreeDemo04"
                       selectionMode="multiple"
                       [(selection)]="selectedFiles"
                       (onNodeSelect)="TreenodeSelect($event)" (onNodeUnselect)="TreenodeUnselect($event)"></tree-display>
            <div style="margin-top:8px">Selected Nodes: <br>
              <span *ngFor="let file of selectedFiles">{{file.data}}<br></span>
            </div>
          </div>
        </div>

        <!-- 可修改
        <div apes-col [apesMd]="12">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>可修改.5（未实现）</div>
            <apes-tree [value]="TreeDemo05">
              <ng-template let-node pTemplate="default">
                <input type="text" style="width:100%">
              </ng-template>
            </apes-tree>
          </div>
        </div>-->

        <!-- 拖动
        <div apes-col [apesMd]="12">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>拖动.6（未实现）</div>
            <apes-tree [value]="TreeDemo06" draggableNodes="true" droppableNodes="true" dragdropScope="files"></apes-tree>
          </div>
        </div>-->

        <!-- checkbox -->
        <div apes-col [apesMd]="12">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>checkbox.7</div>
            <tree-display [value]="TreeDemo07" #tree7
                       [propagateSelectionDown]="true"
                       [propagateSelectionUp]="true"
                       selectionMode="checkbox"
                       [(selection)]="selectedFiles1"
                       (selectionChange)= "getAll($event)"
                       (onNodeSelect)="TreenodeSelect($event)" (onNodeUnselect)="TreenodeUnselect($event)"></tree-display>
            <div style="margin-top: 8px">
              <button type="button" label="Expand all" (click)="clearAllSelect()">清空</button>
              <button type="button" label="check all" (click)="tree7.onSelecedAll($event)">全选</button>
            </div>
            <div style="margin-top:8px">Selected Nodes: <br>
              <span *ngFor="let file of selectedFiles1">{{file.data}}<br></span>
            </div>
          </div>
        </div>

        <!-- 按钮 -->
        <div apes-col [apesMd]="12">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>按钮.8</div>
            <tree-display [value]="TreeDemo08"></tree-display>
            <div style="margin-top: 8px">
              <button type="button" label="Expand all" (click)="expandAll()">展开</button>
              <button type="button" label="Collapse all" (click)="collapseAll()">收缩</button>
            </div>
          </div>
        </div>

        <!-- 水平 -->
        <div apes-col [apesMd]="24">
          <div style="border:1px solid #d9d9d9;margin: 10px;padding: 5px">
            <div>水平.9</div>
            <tree-display [value]="TreeDemo09"
                       layout="horizontal"
                       selectionMode="single"
                       [(selection)]="selectedFile1" ></tree-display>
            <div style="margin-top:8px">Selected Node: {{selectedFile1 ? selectedFile1.label : 'none'}}</div>
          </div>
        </div>

        <!-- 下拉树形 -->
        <!--<div apes-col [apesMd]="24">-->
        <!--<apes-form-item>-->
        <!--<apes-form-label apes-col [apesMd]="2">下拉树形</apes-form-label>-->
        <!--<apes-form-control apes-col [apesMd]="22">-->
        <!--<ng-select [items]="TreeDemo01"-->
        <!--[(ngModel)]="selectedPeople"-->
        <!--[closeOnSelect]=false-->
        <!--bindLabel="label"-->
        <!--bindValue="data">-->

        <!--&lt;!&ndash; 主体部分 &ndash;&gt;-->
        <!--<ng-template ng-option-tmp let-item="item">-->

        <!--<div apes-row>-->
        <!--<apes-tree [value]="TreeDemo01" (onNodeSelect)="nodeSelect($event)"></apes-tree>-->
        <!--</div>-->

        <!--</ng-template>-->

        <!--</ng-select>-->
        <!--</apes-form-control>-->
        <!--</apes-form-item>-->
        <!--</div>-->

      </fieldset>

      <!-- notification样式 -->
      <fieldset>
        <legend>Notification</legend>

        <!-- 基本 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="6">基本.1</apes-form-label>
            <apes-form-control apes-col [apesMd]="18">
              <button apes-button [apesType]="'primary'"
                      (click)="basicNotification()">基本通知</button>
            </apes-form-control>
          </apes-form-item>
        </div>

        <!-- 带图标 -->
        <div apes-col [apesMd]="8">
          <apes-form-item>
            <apes-form-label apes-col [apesMd]="6">带图标.2</apes-form-label>
            <apes-form-control apes-col [apesMd]="18">
              <button apes-button [apesType]="'primary'"
                      (click)="createNotification('success')">Success</button>
              <button apes-button [apesType]="'primary'"
                      (click)="createNotification('info')">Info</button>
              <button apes-button [apesType]="'primary'"
                      (click)="createNotification('warning')">Warning</button>
              <button apes-button [apesType]="'primary'"
                      (click)="createNotification('error')">Error</button>
            </apes-form-control>
          </apes-form-item>
        </div>

      </fieldset>

      <!-- timeline样式 -->
      <fieldset>
        <legend>TimeLine</legend>

        <!-- 基本 -->
        <div apes-col [apesMd]="8">

          <div>基本</div>
          <br>
          <apes-timeline>
            <apes-timeline-item *ngFor="let time of timedata" [apesColor]="time.color">{{time.data}}</apes-timeline-item>
          </apes-timeline>

        </div>

        <!-- 状态 -->
        <div apes-col [apesMd]="8">

          <div>状态</div>
          <br>
          <apes-timeline>
            <apes-timeline-item *ngFor="let time of timedata"
                                [apesColor]="time.color"
                                [apesType]=true>{{time.data}}
            </apes-timeline-item>
          </apes-timeline>

        </div>

        <!-- 实例 -->
        <div apes-col [apesMd]="24">

          <div>实例</div>
          <br>
          <apes-timeline>
            <apes-timeline-item *ngFor="let tmp of timedata"
                                [apesType]=true
                                [apesOA]="tmp.oaFlag"
                                class="apes-timeline-type">
              <div class="apes-timeline-main">
                <!-- 左边部分 -->
                <div class="apes-timeline-main-top">
                  <!-- 操作事件 -->
                  <div class="apes-timeline-operate">
                    <i class="anticon anticon-calendar"></i>
                    {{tmp.operate}}
                  </div>
                  <!-- 操作人员 -->
                  <div class="apes-timeline-name">
                    <i class="anticon anticon-user"></i>
                    {{tmp.operator.name}}
                    <!-- OA -->
                    <!--<span class="apes-timeline-icon"-->
                    <!--*ngIf="tmp.oaFlag === true">-->
                    <!--<i class="anticon anticon-team"></i>-->
                    <!--&lt;!&ndash;OA&ndash;&gt;-->
                    <!--</span>-->
                  </div>
                  <!-- 操作时间 -->
                  <div class="apes-timeline-date">
                    <i class="anticon anticon-clock-circle-o"></i>
                    {{getDateTime(tmp.businessDate)}}
                  </div>
                </div>
                <!-- 底部部分 -->
                <div class="apes-timeline-main-bottom">
                  <!-- 操作备注 -->
                  <textarea apes-input
                            class="apes-timeline-remark"
                            rows="2"
                            readonly="ture"
                            *ngIf="tmp.remark">{{tmp.remark}}</textarea>
                </div>
              </div>
            </apes-timeline-item>
          </apes-timeline>
          <div class="apes-chatter-log-more">
            <button apes-button>加载更多</button>
          </div>
        </div>

      </fieldset>
      <!-- Tree-select样式 -->
      <fieldset>
        <legend>tree-select</legend>

        <!-- 下拉树 -->
        <div apes-col [apesMd]="8">
          <apes-tree-select
            style="width: 250px"
            [apesDefaultExpandedKeys]="expandKeys"
            [(ngModel)]="valueTree"
            [apesNodes]="nodes"
            apesShowSearch
            (ngModelChange)="onChange($event)"
            apesPlaceHolder="Please select"></apes-tree-select>
        </div>

      </fieldset>

      <!-- Tree样式 -->
      <!--<fieldset>-->
        <!--<legend>tree</legend>-->

        <!--&lt;!&ndash; 树 &ndash;&gt;-->
        <!--<div apes-col [apesMd]="8">-->
          <!--<apes-tree-->
            <!--style="width: 250px"-->
            <!--[apesDefaultExpandedKeys]="expandKeys"-->
            <!--[(ngModel)]="nodes"-->
            <!--apesShowSearch-->
            <!--apesPlaceHolder="Please select"></apes-tree>-->
        <!--</div>-->

      <!--</fieldset>-->

      <!-- Drawer样式 -->
      <fieldset>
        <legend>Drawer</legend>

        <!-- 按钮抽屉 -->
        <div apes-col [apesMd]="8">
          <button apes-button apesType="primary" (click)="open()">Open</button>
          <apes-drawer [apesClosable]="false" [apesVisible]="visible" apesPlacement="right" apesTitle="Basic Drawer" (apesOnClose)="close()">
            <p>Some contents...</p>
            <p>Some contents...</p>
            <p>Some contents...</p>
          </apes-drawer>
        </div>
      </fieldset>
    </div>
<!--    <apes-iframe></apes-iframe>-->
    <apes-pagination [apesPageIndex]="1" [apesTotal]="50"></apes-pagination>
    <apes-pagination [apesPageIndex]="1" [apesTotal]="85" [apesPageSize]="20" [apesShowTotal]="totalTemplate"></apes-pagination>
    <br />
    <ng-template #totalTemplate let-total> Total {{ total }} items </ng-template>
    <apes-breadcrumb apesSeparator="/">
      <apes-breadcrumb-item>
        Home
      </apes-breadcrumb-item>
      <apes-breadcrumb-item>
        <a>Application List</a>
      </apes-breadcrumb-item>
      <apes-breadcrumb-item>
        An Application
      </apes-breadcrumb-item>
    </apes-breadcrumb>
    <br />
  </apes-card>

</apes-content>


